/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2023-11-06 18:11:17
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2023-11-07 12:40:37
 * @FilePath: \projecte:\学习\react\my-react-project\src\views\login\index.tsx
 * @Description: 
 */
import React, { useEffect, useState } from 'react'
import styles from './login.module.scss'
import { Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';



type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};



const LoginPage: React.FC = () => {

  const [form] = Form.useForm() 
  const [remember, setRemember] = useState(true)

  useEffect(() => {
    if(localStorage.getItem('pass')) {
      const getPass = JSON.parse( localStorage.getItem('pass') || '' ) 
      if (getPass.remember) {
        form.setFieldsValue({
          username: getPass.username,
          password: getPass.password
        })
      }
    }
  },[form])

  const navigate = useNavigate()
  const onFinish = (values: string) => {
    console.log('Success:', values, remember);
    if(remember) {
      localStorage.setItem('pass', JSON.stringify(values))
    }else{
      localStorage.removeItem('pass')
    }
    navigate('/')
  };

  const onFinishFailed = (errorInfo: unknown) => {
    console.log('Failed:', errorInfo);
  };

  const handleChangeStatus = (e: CheckboxChangeEvent) => {
    setRemember(e.target.value)
  }


  return (
    <div className={styles.container}>
      <div className={styles.loginWrap}>
        <p className={styles.loginTitle}>登录系统</p>
        <div className={styles.inputWrap}>
          <Form
            name="basic"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            form={form}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item<FieldType>
              label="用户名"
              name="username"
              rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <Input allowClear />
            </Form.Item>

            <Form.Item<FieldType>
              label="密码"
              name="password"
              rules={[{ required: true, message: 'Please input your password!' }]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item<FieldType>
              name="remember"
              valuePropName="checked"
              wrapperCol={{ offset: 8, span: 16 }}
            >
              <Checkbox checked={remember} onChange={handleChangeStatus}>Remember me</Checkbox>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default LoginPage
